<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form
            :inline="true"
            :model="pageData.query"
            @submit.prevent="pageActions.handleSearch"
            @keyup.enter="pageActions.handleSearch"
          >
            <el-form-item label="外部订单编号">
              <el-input v-model="pageData.query.outTradeNo" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
              <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">添加</el-button>
        </div>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data" style="width: 100%">
        <el-table-column prop="game" label="游戏名称"></el-table-column>
        <el-table-column prop="gameAreaDesc" label="游戏大区"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" width="180px"></el-table-column>
        <el-table-column prop="outTradeNo" label="外部订单号" width="280px"></el-table-column>
        <el-table-column prop="location" label="修改地址" width="230px"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="160px"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="160px"></el-table-column>
        <el-table-column label="二维码状态" fixed="right" width="120px">
          <template #default="{ row }">
            <el-tag v-if="row.qrcodeState == 0" type="info">{{ row.qrcodeStateDesc }}</el-tag>
            <el-tag v-else-if="row.qrcodeState == 1" type="primary">{{ row.qrcodeStateDesc }}</el-tag>
            <el-tag v-else>{{ row.qrcodeStateDesc }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" fixed="right" width="120px">
          <template #default="{ row }">
            <el-tag v-if="row.orderState == 0" type="info">{{ row.orderStateDesc }}</el-tag>
            <el-tag v-else-if="row.orderState == 1" type="info">{{ row.orderStateDesc }}</el-tag>
            <el-tag v-else-if="row.orderState == 3" type="success">{{ row.orderStateDesc }}</el-tag>
            <template v-else-if="row.orderState == 4">
              <el-tag type="danger">{{ row.orderStateDesc }}</el-tag>
              <!-- {{ row.reason }} -->
            </template>
            <el-tag v-else>{{ row.orderStateDesc }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template #default="{ row }">
            <Clipboard :text="row.h5" style="display: inline-flex">
              <!-- <span style="color: var(--el-color-primary); cursor: pointer">复制链接</span> -->
              <el-button link type="primary" icon="DocumentCopy"> 复制链接</el-button>
            </Clipboard>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      ></el-pagination>
    </template>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
      :form-props="{
        'label-width': '90px',
        'label-position': 'left',
      }"
    >
      <el-col :span="24">
        <el-form-item
          label="修改地址"
          prop="location"
          :rules="[{ required: true, message: '请选择修改地址', trigger: 'blur' }]"
          style="width: 100%"
        >
          <JaxAreaCascader
            :text="pageData.detail ? pageData.detail.location.split('/') : []"
            @change="({ text }) => (pageData.detail.location = text.join('/'))"
            placeholder="请选择修改的战区位置"
          />
        </el-form-item>
      </el-col>
    </jax-dialog-edit>
  </app-page>
</template>

<script setup>
import { http, usePageList } from 'jax-node'
import JaxAreaCascader from 'jax-base/components/AreaCascader.vue'
import Clipboard from '@/components/Clipboard.vue'

const { pageData, pageActions } = usePageList({
  defaultDetail: {
    gameArea: 'android_wx',
    game: '王者荣耀',
    location: '',
  },
})

const json = computed(() => {
  const fixed = false
  const required = true
  const miniInput = { style: 'width:100px' }

  return [
    {
      name: 'game',
      label: '游戏',
      type: 'select',
      options: [{ label: '王者荣耀', value: '王者荣耀' }],
      required,
      inputAttr: { style: 'width:100%' },
    },
    {
      name: 'gameArea',
      label: '游戏大区',
      type: 'select',
      options: [
        { label: '苹果微信', value: 'ios_wx' },
        { label: '安卓微信', value: 'android_wx' },
        { label: '苹果QQ', value: 'ios_qq' },
        { label: '安卓QQ', value: 'android_qq' },
      ],
      required,
      inputAttr: { style: 'width:100%' },
    },
  ]
})

// 保存前
pageActions.handleBeforeSubmit = detail => {}
</script>
